<!--
 * @Author: wangze@linkstec.com
 * @Date: 2022-02-28 17:50:05
 * @Function: Please Input Function
-->
<template>
  <div class="header-search">
    <div class="search-input-wrapper">
      <el-popover
        placement="bottom"
        width="780"
        v-model="searchIsShow"
        trigger="manual">
        <!-- <searchIndex></searchIndex> -->
        <div style="position: relative;">
          <lk-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.value">
              内容
              <!-- <lk-empty v-if="searchData.length === 0 && !loading"></lk-empty>
              <div class="loading-wrap" v-if="loading"><i class="el-icon-loading" style="font-size: 20px;"></i></div>
              <ul class="search-list">
                <li class="search-item" v-for="(searchItem) in searchData" :key="searchItem['detail'].prod_code" @click="toFundDetail(searchItem['detail'])">
                  <span class="type">产品</span><span class="name">{{ searchItem['detail'].prod_code }} {{ searchItem['detail'].prod_name }}</span>
                </li>
              </ul> -->
            </el-tab-pane>
          </lk-tabs>
        </div>

        <el-input
          ref="searchInput"
          slot="reference"
          v-model="keyword"
          @input="querySearchAsync"
          @focus="searchFocus"
          @blur="searchBlur"
          placeholder="请输入关键词搜索"
          prefix-icon="el-icon-search"
          size="small"
          class="search-input"
          clearable></el-input>
      </el-popover>

      <!-- <el-autocomplete
        ref="inputSearch"
        v-model="keyword"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入关键词搜索"
        prefix-icon="el-icon-search"
        popper-class="popper-search-input"
        class="search-input"
        size="small"
        value-key="title"
        clearable
        @select="handleSelect"
      >

      </el-autocomplete> -->
    </div>
  </div>
</template>
<script>
import { Autocomplete } from 'element-ui';
// import searchIndex from './search/index.vue';
import _ from 'lodash';

export default {
  components: {
    [Autocomplete.name]: Autocomplete
  },

  data () {
    const seniorPath = '/senior/detail'; // 高端理财详情路径
    return {
      activeName: 'all',
      loading: false,
      searchIsShow: false,
      isTabClick: false,
      keyword: '',
      // isShowInput: false,
      searchData: [], // 搜索结果
      ConductFinancialTransactions: [], // 理财产品
      // 理财产品跳转路径
      codeToPath: {
        3: '/IncomeReceipts/productDetail', // 收益凭证详情
        4: '/tianhuibao/productDetail', // 天汇宝详情
        7: seniorPath, // 基金专户
        9: seniorPath, // OTC资管
        'X': seniorPath, // 信托计划
        '8': seniorPath // 私募基金
      },
      // 理财产品url产品编码字段名
      codeToQuery: {
        3: 'PRO_CODE',
        4: 'PROD_CODE',
        7: 'PRO_CODE',
        9: 'PRO_CODE',
        'X': 'PRO_CODE',
        '8': 'PRO_CODE'
      },
      // 理财产品入参
      prodTypes: '3|4|7|9|X|8',
      tabList: [
        { label: '全部', value: 'all', components: 'searchAll' },
        { label: '产品', value: 'product', components: 'searchProduct' },
        { label: '研究', value: 'research', components: 'searchResearch' },
        { label: '债券', value: 'bond', components: 'searchBond' },
        { label: '公司', value: 'company', components: 'searchCompany' },
        { label: '发现', value: 'discover', components: 'searchDiscover' }
      ]
    };
  },
  computed: {
    companyList () {
      return this.searchData.length > 0 ? _.uniqWith(this.searchData, function (arrVal, othVal) {
        return arrVal['detail'].sup_name === othVal['detail'].sup_name;
      }) : [];
    }
  },
  mounted () {},
  methods: {
    // 切换tab
    handleClick () {
      this.isTabClick = true;
      this.$refs.searchInput.focus();
      setTimeout(() => {
        this.isTabClick = false;
      }, 300);
    },

    // 查看基金详情
    toFundDetail (row) {
      this.searchIsShow = false;
      this.$router.push({
        path: '/publicfund/fundDetail',
        query: {
          prodCode: row.prod_code
        }
      });
    },
    // 查看理财产品的详情
    toConductFinancialTransactionsDetails (row) {
      this.$router.push({
        path: this.codeToPath[row.prod_type],
        query: {
          [this.codeToQuery[row.prod_type]]: row.prod_code
        }
      });
    },
    // 查看公司详情
    toFundcompany (row) {
      // this.searchIsShow = false;
      window.open(row.detail_url);
    },
    // 搜索框focus
    searchFocus () {
      this.searchIsShow = true;
    },
    // 搜索框blur
    searchBlur: _.debounce(function () {
      if (!this.isTabClick) {
        // this.searchIsShow = false;
      }
    }, 200),

    // 搜索
    querySearchAsync: _.debounce(function (queryString) {
      this.loading = true;
      this.searchData = [];

      if (!queryString) {
        this.searchData = [];
        this.loading = false;
      } else {
        // 查询基金产品
        this.$api.home.search({
          'keyword': queryString,
          'targetTypes': ['WEALTH'],
          'channel': 'VINTEXWEB',
          'pageNo': 0,
          'pageSize': 10
        }).then(res => {
          this.loading = false;
          const data = res.data || {};
          const obj = data.data && data.data.length > 0 ? data.data[0] : {};
          this.searchData = obj.list || [];
          // 查询理财产品
          this.$api.home.search({
            'keyword': queryString,
            'targetTypes': ['WEALTH'],
            'financialParams': { 'prodType': this.prodTypes },
            'channel': 'VINTEXWEB',
            'pageNo': 0,
            'pageSize': 20
          }).then(res => {
            this.loading = false;
            const data = res.data || {};
            const obj = data.data && data.data.length > 0 ? data.data[0] : {};
            this.ConductFinancialTransactions = obj.list || [];
            this.automaticSwitchTab();
          });
        });
      }
    }, 300),
    // 自动切换TAB
    automaticSwitchTab () {
      const dataList = [
        {
          name: 'fund',
          list: this.searchData
        },
        {
          name: 'ConductFinancialTransactions',
          list: this.ConductFinancialTransactions
        },
        {
          name: 'company',
          list: this.companyList
        }
      ];
      // 首先判断当前TAB是否存在数据
      const currentTab = dataList.some(item => item.name === this.activeName && item.list.length > 0);
      if (currentTab) return;
      // 是否能够查询到数据
      const exist = dataList.some(item => item.list.length > 0);
      if (exist) {
        this.activeName = dataList.filter(item => item.list.length > 0)[0].name;
      }
    }
  }
};
</script>

<style lang="scss">
.popper-search-input {
  li {
    padding: 5px;
    line-height: normal;

    .item-inner {
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        color: #333;
      }

      .type {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.el-popover{
  height:500px;
  background: linear-gradient(180deg, #F1F4FB 0%, #FFFFFF 25.1%);
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
}
.lk-tabs{
  .el-tabs__nav-wrap::after{
    bottom: 1px;
  }
}
.el-tabs__item{
  height: 47px;
  line-height: 47px;
}
.lk-tabs[data-v-6724e6ef] .el-tabs__nav-scroll .el-tabs__item.is-top{
  font-size: 18px;
}
</style>

<style lang="scss" scoped>

.search-list{
  max-height: 216px;
  overflow-y: auto;
  .search-item {
    padding: 5px;
    line-height: normal;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    &:hover{
      background-color: #F6F8FF;
    }
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      color: #333;
    }

    .type {
      border-radius: 4px;
      background: #EAF1FF;
      color:#2468F2;
      font-size: 12px;
      text-align: center;
      line-height: 18px;
      padding: 2px 8px;
      margin-right: 16px;
    }
  }
}
.header-search {
  display: flex;
  align-items: center;

  .search-input-wrapper {
    overflow: hidden;
    .search-input {
      width: 220px;
    }
  }
}
::v-deep .el-tabs__active-bar{
  width: 72px;
}
</style>
